<template>
  <div class="pageTitle">
    <div class="item date">{{curDate}}</div>
    <div class="tit">{{$route.meta.title}}</div>
    <div class="item __select">
      <el-select v-model="params.area" placeholder="请选择">
        <el-option
          v-for="item in areaOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        popper-class="__datePickerYear"
        v-model="params.year"
        type="year"
        :clearable="false"
        format="yyyy年"
        placeholder="选择年">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    name: 'pageTitle',
    components: {},
    data() {
      return {
        curDate: '',
        areaOptions: [
          { label: '婺城区', value: '330702' },
          { label: '金东区', value: '330703' },
          { label: '武义县', value: '330723' },
          { label: '浦江县', value: '330726' },
          { label: '磐安县', value: '330727' },
          { label: '兰溪市', value: '330781' },
          { label: '义乌市', value: '330782' },
          { label: '东阳市', value: '330783' },
          { label: '永康市', value: '330784' }
        ],
        params: {
          area: '330784',
          year: '2024',
        }
      }
    },
    mounted() {
      this.getCurDate()
    },
    methods: {
      // 获取当前日期
      getCurDate(){
        let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        let date = new Date()
        let res = {
          y: moment(date).format('YYYY年'), // 年
          md: moment(date).format('MM月DD日'), // 月日
          week: weeks[moment(date).format('d')], // 星期
          time: moment(date).format('HH:mm') // 时间
        }
        this.curDate = `${res.y}${res.md} ${res.week}`
      },
      goToRoute(route){
        if(route.name !== this.$route.name){
          this.$router.push({ path: route.path })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .pageTitle {
    width: 100%; height: 100%; background: url('~@/assets/img/pageTitleBg.png') center no-repeat;
    display: flex; align-items: center; justify-content: space-between;
    position: relative;
    .item {
      width: 440px;
      &.date { padding-left: 20px; font-size: 16px; font-family: PingFangSC; color: rgba(255,255,255,0.85); }

    }
    .tit {
      font-size: 46px; font-family: YouSheBiaoTiHei; letter-spacing: 2px;
      background: linear-gradient(180deg, #FFFFFF 0%, #B6EAFF 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      // position: absolute; left: 50%; transform: translateX(-50%); margin-top: 8px;
    }
  }

  ::v-deep .__select {
    display: flex; justify-content: right;
    .el-select, .el-date-editor { width: 190px; margin-right: 20px; }
    .el-input__inner {
      background: transparent!important; border: 1px solid #3B9DF7; color: #fff; font-family: PingFangSC;
      &:focus { outline: none; }
    }
  }

</style>
<style lang="scss">
  .el-select-dropdown {
    background: #002954!important; border: 1px solid rgba(59, 157, 247, .3);
    .el-select-dropdown__item {
      color: #fff; transition: all .3s; font-family: PingFangSC; font-weight: normal; font-size: 14px;
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
      background: rgba(117, 160, 255, 0.1)!important; color: #409EFF;
    }
    .popper__arrow::after {
      border-bottom-color: #002954!important;
    }
  }
  .__datePickerYear {
    background: #002954!important;  border: 1px solid rgba(59, 157, 247, .3);
    color: rgba(118,158,191,0.85);
    .popper__arrow::after {
      border-bottom-color: #002954!important;
    }
    .el-picker-panel__icon-btn { color: rgba(118,158,191,0.85); }
    .el-date-picker__header-label { color: rgba(118,158,191,0.85); }
    .el-date-picker__header--bordered { border-bottom-color: rgba(59, 157, 247, .3); }
    .el-year-table td .cell {  color: rgba(118,158,191,0.85); font-family: PingFangSC; font-weight: normal; font-size: 14px; }
  }
</style>
